/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/modules/leaveJob/index
/*  author : arida
/*  date   : 2017-6-4 18:24:50
/*  last   : 2017-10-2 12:12:17
*/
import React, { Component } from "react";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Button, TextareaItem } from "@ali/ding-ui";
import autobind from "autobind-decorator";
import { createForm } from "rc-form";

// actions
import { leaveJob, getAllLeaveReasons } from "../../actions/growth/";

// utils
import { setTitle, openLink, toast } from "../../utils/dingtalk.js";
import { validator, showMessage } from "../../utils/form.js";
import { get } from "../../utils/db.js";

// less
import "./index.less";
import "../steps/steps.less";

// components
import ProduceComponent from "../../components/produceComponent";
import Select from "../../components/Select/";
import DatePicker from "../../components/DatePicker/";
import InputItem from "../../components/InputItem/";

// 将store注入组件的props
const mapStateToProps = state => ({ welcome: state.WELCOME_USER });
// 将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
  // 区分绑定到props的action与传递的props
  actions: bindActionCreators(
    {
      dispatch,
      leaveJob,
      getAllLeaveReasons
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
class LeaveJob extends Component {
  static defaultProps = {};
  // propTypes 验证
  static propTypes = {
    actions: PropTypes.shape({
      dispatch: PropTypes.func.isRequired,
      leaveJob: PropTypes.func.isRequired,
      getAllLeaveReasons: PropTypes.func.isRequired
    }).isRequired,
    form: PropTypes.shape({
      getFieldDecorator: PropTypes.func,
      getFieldsValue: PropTypes.func,
      setFieldsValue: PropTypes.func,
      validateFields: PropTypes.func
    })
  };

  constructor(props) {
    super(props);
    setTitle({ title: "办理离职" });

    this.state = {
      name: "",
      remainAnnualDays: ""
    };
  }
  componentWillUpdate() {
    setTitle({
      title: "办理离职"
    });
  }
  componentDidMount = () => {
    this.props.actions
      .getAllLeaveReasons({
        userId: get("userId")
      })
      .then(res => {
        this.setState({
          leaveReasons: res.result.dismissionReasonList,
          name: res.result.name,
          remainAnnualDays: res.result.remainAnnualDays
        });
      });
  };

  @autobind
  submit() {
    this.props.form.validateFields(err => {
      if (!err) {
        this.props.actions
          .leaveJob({
            userId: get("userId"),
            ...this.props.form.getFieldsValue()
          })
          .then(res => {
            if (res.success) {
              toast({
                text: "已提交",
                onSuccess() {
                  openLink("#/growth");
                }
              });
            }
          });
      } else {
        showMessage(err);
      }
    });
  }
  render() {
    const {
      getFieldDecorator,
      setFieldsValue,
      getFieldsValue
    } = this.props.form;
    const { name, remainAnnualDays } = this.state;
    // const holidayLeft = get("holidayLeft");
    // const username = get("username");
    return (
      <div>
        <div className="scroll-body leave-job step-form ">
          <ProduceComponent
            list={[
              {
                component: InputItem,
                props: {
                  value: name,
                  id: "name",
                  visible: true,
                  editable: true,
                  disabled: true,
                  required: false,
                  label: "姓名"
                }
              },
              {
                component: DatePicker,
                props: {
                  value: "",
                  id: "lastWorkDate",
                  visible: true,
                  editable: true,
                  required: true,
                  label: "离职日期"
                }
              },
              {
                component: Select,
                props: {
                  value: "",
                  id: "dismissionReason",
                  options: this.state.leaveReasons,
                  visible: true,
                  editable: true,
                  required: true,
                  label: "离职原因"
                }
              },
              {
                component: TextareaItem,
                props: {
                  value: "",
                  id: "dismissionMemo",
                  rows: 3,
                  visible: true,
                  editable: true,
                  required: false,
                  label: "离职原因备注"
                }
              }
            ]}
            validator={validator} // form 校验
            getFieldDecorator={getFieldDecorator}
            setFieldsValue={setFieldsValue}
            getFieldsValue={getFieldsValue}
          />
          {/* <div className="leave-job-holiday-left">
            剩余年假：该员工还剩{remainAnnualDays}天未休
          </div> */}
        </div>
        <div className="scroll-btn scroll-btn-preview">
          <Button
            className="preview-button"
            type="primary"
            onClick={this.submit}
          >
            提交
          </Button>
        </div>
      </div>
    );
  }
}

export default createForm()(LeaveJob);
